<template src="./tpl.html"></template>

<script>
import { CONSENT_GET_OFFICIAL_ACCOUNT_DATA ,
         CONSENT_UPDATE_OFFICIAL_ACCOUNT_DATA,
         CONSENT_GET_KS_INFO,
         CONSENT_GET_YS_INFO,
         CONSENT_UPDATE_KS_INFO,
         CONSENT_UPDATE_YS_INFO,
         CONSENT_GET_YSBS_INFO,
         CONSENT_GET_KSBS_INFO,
} from "_SERVICES/api";


export default {
  name: "EditPage",
  data() {
    return {
      selectedMenu: 'medicalNotice', 
      newData:[{TITLE_EN:'',TSNR_EN:'',TITLE:'',TSNR:''},
               {TITLE_EN:'',TSNR_EN:'',TITLE:'',TSNR:''},
               {TITLE_EN:'',TSNR_EN:'',TITLE:'',TSNR:''},
               {TITLE_EN:'',TSNR_EN:'',TITLE:'',TSNR:''},
      ],
      ksData:[{DM:'',MC:'',MC_EN:'',ZKJS:'',ZKJS_EN:''}],
      ysData:[],
      ysbsData:[],
      ksbsData:[],
      filteredYsData: [], // 过滤后的医生数据
      filteredKsData: [] // 过滤后的科室数据
    };
  },
  mounted() {
    //打开页面获取所有数据
    this.handleQueries()
  },
  methods: {
    // 选择菜单时，更新显示内容
    selectMenu(menu) {
      this.selectedMenu = menu;
   
    },


    handleQueries() {
      // 获取所有信息
      this.get_official_account_data().then(() => {
        this.get_ks_info();
        this.get_ys_info();
        // this.$message({
        //   message: '获取成功',
        //   type: 'success'
        // });

      }).catch((error) => {
        // 处理错误
        console.error("Error occurred:", error);
        this.$message({
          message: '获取失败',
          type: 'error'
        });
      });
    },

    // 获取公众号所以公告信息
    get_official_account_data() {
      return new Promise((resolve, reject) => {
        CONSENT_GET_OFFICIAL_ACCOUNT_DATA({}).then((res) => {
          if (res.data) {
            this.newData = res.data; 
            this.$message({
          message: '公告查询成功',
          type: 'success'
        }); 
            resolve(res);  
          } else {
            console.log("没有获取到门诊就诊须知数据");
            reject(new Error("没有获取到门诊就诊须知数据"));
          }
        }).catch((error) => {
          console.error("请求出错：", error);
          reject(error); 
        });
      });
    },

    // 获取公众号科室信息(专科介绍和专科列表名称)
    get_ks_info() {
      CONSENT_GET_KS_INFO({}).then((res) => {
        if (res.data) {
          this.ksData = res.data;
          console.log('ksData',ksData)
          this.$message({
          message: '科室信息查询成功',
          type: 'success'
        });
        } else {
          console.log("没有获取到科室信息");
        }
      }).catch((error) => {
        console.error("请求出错：", error);
        this.$message({
          message: '科室信息查询失败',
          type: 'error'
        });
      });
    },

    // 获取公众号医生医疗专长信息
    get_ys_info() {
      CONSENT_GET_YS_INFO({}).then((res) => {
        if (res.data) {
          this.ysData = res.data;
          this.$message({
          message: '医生医疗专长查询成功',
          type: 'success'
        }); 
        } else {
          console.log("没有获取到医疗专长信息");
        }
      }).catch((error) => {
        console.error("请求出错：", error);
        this.$message({
          message: '医疗专长信息查询失败',
          type: 'error'
        });
      });
    },



    // 更新公众号所有公告信息
    update_official_account_data() {
      // 使用 Promise.all 来等待所有更新操作完成
      let updatePromises = this.newData.map(item => {
        let param = {
          ZKID: item.ZKID,
          TITLE: item.TITLE,
          TSNR: item.TSNR,
          TITLE_EN: item.TITLE_EN,
          TSNR_EN: item.TSNR_EN,
        };
        // 返回更新操作的 Promise
        return CONSENT_UPDATE_OFFICIAL_ACCOUNT_DATA(param);
      });
      // 等待所有更新操作完成
      Promise.all(updatePromises)
        .then(() => {
          this.$message({
            message: '更新成功',
            type: 'success'
          });
        })
        .catch((error) => {
          console.error('更新失败: ' + error);
      });
    },

//获取科室信息修改记录的标识
    get_ksbs_info(){
      CONSENT_GET_KSBS_INFO({}).then((res) => {
        if (res.data) {
          this.ksbsData = res.data;
          console.log("ksbsData:",res.data)
      // 过滤ksData，只保留在ksbsData中存在的DM
      this.filteredKsData = this.ksData.filter(ksItem => 
        this.ksbsData.some(ksbsItem => ksbsItem.DM === ksItem.DM)
      );
        } 
      }).catch((error) => {
        console.error("请求出错：", error);
        this.$message({
          message: '获取修改标识失败或没有修改记录',
          type: 'error'
        });
      });
    },

update_ks_info(item) {  // 接收当前 item 作为参数
  const param = {
    DM: item.DM,       
    MC: item.MC,       
    MC_EN: item.MC_EN, 
    ZKJS: item.ZKJS,   
    ZKJS_EN: item.ZKJS_EN 
  };

  console.log("正在更新科室：", param); 

  CONSENT_UPDATE_KS_INFO(param)
    .then(() => {
      this.$message({
        message: `科室 ${item.MC} 更新成功`,
        type: 'success'
      });
    })
    .catch((error) => {
      console.error(`科室 ${item.MC} 更新失败:`, error);
      this.$message({
        message: `科室 ${item.MC} 更新失败: ${error.message}`,
        type: 'error'
      });
    });
},


//获取医生医专长修改记录的标识
    get_ysbs_info(){
      CONSENT_GET_YSBS_INFO({}).then((res) => {
        if (res.data) {
          this.ysbsData = res.data;
          console.log("ysbsData:",res.data)
      // 过滤ysData，只保留在ysbsData中存在的YSYHID
      this.filteredYsData = this.ysData.filter(ysItem => 
        this.ysbsData.some(bsItem => bsItem.YSYHID === ysItem.YSYHID)
      );
        } 
      }).catch((error) => {
        console.error("请求出错：", error);
        this.$message({
          message: '获取修改标识失败或没有修改记录',
          type: 'error'
        });
      });
    },


update_ys_info(item) {
  // 只构造当前记录的参数
  const param = {
    YSYHID: item.YSYHID,          
    JSNR_YSJS: item.JSNR_YSJS,    
    JSNR_YSJS_EN: item.JSNR_YSJS_EN 
  };

  console.log("正在更新医生:", param); 

  CONSENT_UPDATE_YS_INFO(param)
    .then(() => {
      this.$message({
        message: `医生 ${item.YSYHID} 更新成功`,
        type: 'success'
      });
    })
    .catch((error) => {
      console.error(`医生 ${item.YSYHID} 更新失败:`, error);
      this.$message({
        message: `医生 ${item.YSYHID} 更新失败: ${error.message}`,
        type: 'error'
      });
    });
}


  }
};
</script>

<style lang="less">
.page-container {
  display: flex;
  padding: 2px;
}

.sidebar {
  width: 200px;
  height: 820px;//左边菜单高度
  background-color: #f4f4f4;
  padding: 10px;
  border-radius: 8px;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  padding: 10px;
  cursor: pointer;
}

.sidebar ul li:hover {
  background-color: #ddd;
}

.content {
  flex: 1;
    max-height: 90vh; /* 限制最大高度为视口高度的 80% */
    overflow-y: auto; /* 如果内容超过最大高度，启用滚动条 */
    padding: 10px;
  // margin-left: 20px;
  // flex: 1;
}

.form-container {
  position: relative;
  margin-bottom: 20px;
}

/* 让 .small-textarea 的宽高设置优先级更高 */
.content textarea {
  width: 100%;           /* 让 textarea 占满父容器的宽度 */
  height: 310px;         /* 设置合适的高度 */
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  resize: none;          /* 禁止用户调整大小 */
  box-sizing: border-box; /* 包括边框和内边距在内计算宽度 */
}

/* 添加 !important 来强制执行样式 */
.content .small-textarea {
  width: 100% !important; /* 让宽度为父容器的一半 */
  height: 50px !important; /* 设置较小的高度 */
}

.mn-container {
  position: relative;
  padding: 20px;
}

.button-container {
  position: absolute;
  bottom: -18px;
  right: 10px;
}
.button1-container {
  position: absolute;
  bottom: -39px;
  right: 1px;
}
.button2-container {
  position: absolute;
  bottom: -39px;
  right: 1px;
}
.button3-container {
  position: absolute;
  bottom: -39px;
  right: 1px;
}
.button4-container{
  position: absolute;
  bottom: -39px;
  right: 1px;
}

.query-btn {
    background-color: #4CAF50; 
    color: white; 
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.query-btn:hover {
    background-color: #45a049; 
}

.save-btn {
    background-color:  #409eff; 
    color: white; 
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

.save-btn:hover {
    background-color: #0b7dda; 
}
</style>
